
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>试卷信息</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        .examine-title {
            padding: 10px;
            background-color: #ACD6FF;
            color: darkblue;
        }

        .examine-item {
            padding: 5px 10px;
            border-bottom: 1px solid #ccc;
        }

        input[type='radio'] {
            margin-right: 5px;
            cursor: pointer;
        }

        label {
            margin-right: 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->
    <div class="menuW" style="float: left">
        <div class="sideMenu">
            <div class="head">欢迎使用本系统</div>
            <ul>
                <li class="nLi">
                    <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li><a href="index.html"><i class="fa fa-dashboard"></i>首页</a></li>
                    </ul>
                </li>
                <li class="nLi on">
                    <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                    </h3>
                    <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="teacherInfo.html"><i class="fa fa-table"></i>教师信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>学生信息</a>
						</li>
						<li v-if="authority.indexOf(4) != -1">
							<a href="fileInfo.html"><i class="fa fa-table"></i>资料信息</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="zuoyeInfo.html"><i class="fa fa-table"></i>提交作业</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html"><i class="fa fa-table"></i>公告信息</a>
						</li>
						<li v-if="authority.indexOf(1000004) != -1">
							<a href="nxTypeInfo.html"><i class="fa fa-table"></i>试题类别</a>
						</li>
						<li v-if="authority.indexOf(1000005) != -1">
							<a href="nxQuestionTypeInfo.html"><i class="fa fa-table"></i>题型信息</a>
						</li>
						<li v-if="authority.indexOf(1000006) != -1">
							<a href="nxQuestionInfo.html"><i class="fa fa-table"></i>试题信息</a>
						</li>
						<li v-if="authority.indexOf(1000007) != -1">
							<a href="nxTestpaperInfo.html"><i class="fa fa-table"></i>试卷信息</a>
						</li>
						<li v-if="authority.indexOf(1000008) != -1">
							<a href="nxScoreInfo.html"><i class="fa fa-table"></i>成绩信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>资料信息<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="fileInfoComment.html"><i class="fa fa-unlock-alt"></i>资料信息评论</a>
						</li>
					</ul>
				</li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>提交作业<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="zuoyeInfoComment.html"><i class="fa fa-unlock-alt"></i>提交作业评论</a>
						</li>
					</ul>
				</li>

                <li class="nLi">
                    <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                    </ul>
                </li>
                <li class="nLi">
                    <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 头部开始 -->
        <div class="main-head" style="width: 100%; display: flex">
            <div style="flex: 1; text-align: right">
                <a href="/front/index.html"> <i class="fa fa-backward" style="margin-right: 5px"></i>返回前台首页</a>
                <a href="javascript:void(0)" @click="personalPage">当前登录：<span style="color: yellow">{{user.name}}</span></a>
                <a href="javascript:void(0)" @click="logout">退出登录</a>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 主体开始 -->
        <div style="padding: 0 20px">
            <div>
                <div class="table-title">试卷信息</div>
            </div>

            <!-- 表格主体-->
            <div style="margin-top: 10px">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">试卷信息</div>
                            <div class="panel-body">
                                <div class="table-responsive" id="content">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格主体结束-->
        </div>
        <!-- 主体结束 -->
    </div>
</div>


<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/my.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    var obj;
    var maxtime;

    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el: '#wrapper',
        data: {
            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            user: {}
        },
        created() {
            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/permission/6").then(res => {
                if (res.data.code === '0') {
                    this.permission = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            const code = getQueryVariable("code");
            if (code) {
                const user = JSON.parse(localStorage.getItem("user"));
                // 获取试卷的html
                $.get(`/nxScoreInfo/code/${code}/${user.id}/${user.level}`).then(res => {
                    if (res.code === '0') {
                        if (res.data) {
                            $("#content").append(res.data.userContent);
                            $("#submit").css('display', 'none');
                            $(".solution").css('display', '');
                            let userAnswer = JSON.parse(res.data.userAnswer);
                            for (let key in userAnswer) {
                                let val = userAnswer[key];
                                if (val.indexOf(",") > -1) {  // 多选
                                    let arr = val.split(",");
                                    for (let a of arr) {
                                        $(`input[name=${key}][value=${a}]`).attr('checked', 'checked');
                                        $(`input`).attr("disabled", 'disabled')
                                    }
                                } else {
                                    if (val === 'A' || val === 'B' || val === 'C' || val === 'D'
                                        || val === '正确' || val === '错误') {
                                        $(`input[name=${key}][value=${val}]`).attr('checked', 'checked');
                                        $(`input`).attr("disabled", 'disabled')
                                    } else {
                                        $(`[name=${key}]`).text(val);   // textarea 是text
                                        $(`[name=${key}]`).val(val);   // 输入框是val
                                        $(`[name=${key}]`).attr("disabled", 'disabled')
                                    }
                                }
                            }
                        } else {
                            $.get(`/nxTestpaperInfo/code/${code}`).then(res => {
                                if (res.code === '0') {
                                    $("#content").append(res.data.content);
                                    obj = res.data;
                                } else {
                                    msg('error',res.msg);
                                }

                                let time = $("#time").text().replace('分', '');
                                maxtime = time * 60; //一个小时，按秒计算，自己调整!
                                setInterval("CountDown()", 1000);
                            });
                        }
                    } else {
                        msg('error', res.msg);
                    }
                });
            } else {
                msg("未找到试卷信息");
            }
        }
    });


    function CountDown() {
        if (maxtime >= 0) {
            let minutes = Math.floor(maxtime / 60);
            let seconds = Math.floor(maxtime % 60);
            let msg = "距离结束还有" + minutes + "分" + seconds + "秒";
            $("#time").text(msg);
            if (maxtime === 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
            submit();
        }
    }

    function submit() {
        let userAnswer = {};
        let length = Object.keys(JSON.parse(obj.answer)).length;
        for (let i = 1; i <= length; i++) {
            userAnswer[i + ''] = '';   // 默认赋值
            let $i = $('[name='+i+']');
            if($i.prop("type") === 'radio') {
                $i.each(function () {
                    if($(this).prop('checked') === true) {
                        userAnswer[i + ''] = $(this).val();
                    }
                });
            } else if($i.prop("type") === 'checkbox') {
                let all = '';
                $i.each(function () {
                    if($(this).prop('checked') === true) {
                        all += $(this).val() + ",";
                    }
                });
                if(all) {all = all.slice(0, all.lastIndexOf(","))}   // 去除最后一个 “,” 号
                userAnswer[i + ''] = all;
            } else {
                userAnswer[i + ''] = $i.val();
            }
        }
        $.ajax({
            url: '/nxScoreInfo',
            contentType: 'application/json',
            type: 'post',
            data: JSON.stringify({
                name: obj.name, code: obj.code, userContent: $('#content').html(),
                userAnswer: JSON.stringify(userAnswer), defaultAnswer: obj.answer
            }),
            success: function (res) {
                if (res.code === '0') {
                    location.href = '/end/page/nxTestpaperInfo.html';
                } else {
                    msg('error', res.msg);
                }
            }
        });
    }

    /**
     * 获取url指定参数
     * @param variable
     * @returns {string|boolean}
     */
    function getQueryVariable(variable) {
        let query = location.href.substring(location.href.indexOf("?") + 1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return '';
    }
</script>
</body>
</html>
